import React, { useState } from 'react'
/* 
  useState:
    - 让函数式组件支持state状态
    - useState() 方法里面唯一的参数就是初始 state
    - useState返回一个只有两个元素的数组
      - 第一个元素是当前的 state 的值
      - 第二个元素是一个函数,用来替换原来state中的值,这个函数的修改state和setState一样是异步的
    - React 会在重复渲染时记住它当前state的值，并且提供最新的值给我们的函数
*/
export default function App() {
  const [count, setCount] = useState(0)
  const [isHot, setIsHot] = useState(true)
  const setCountHandle = () => {
    setCount(count + 1)
  }
  const setIsHotHandle = () => {
    setIsHot(!isHot)
  }
  const [person, setPerson] = useState([{
    id: '001',
    name: '魈'
  }, {
    id: '002',
    name: '神里绫华'
  }, {
    id: '003',
    name: '钟离'
  }])
  return (
    <div>
      <h1 >累加的值是？ {count}</h1>
      <h2>今天这么大的太阳会下雨吗，{isHot ? '会' : '不会'}</h2>
      <ul>
        {
          person.map((item)=>{
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
      <button onClick={setCountHandle}>+</button>
      <button onClick={setIsHotHandle}>会不会下雨</button>
    </div>
  )
}

